<template>
  <div class="">
    <Header></Header>
    <div class="h-5"></div>
    <div class="mask-line" v-if="isSticky"></div>
    <div class="flex wrapper gap-3.5 pos-relative" ref="detailWrapperRef">
      <div class="w-6/10 pos-relative" style="z-index: 11">
        <div class="detail-box">
          <div class="preview-box border-rounded-2xl">
            <PreviewPanel :media-list="product?.mediaList || []"></PreviewPanel>
          </div>
          <div class="sticky-element">
            <div class="h-5"></div>
            <div class="tab-box" :style="{ paddingTop: isSticky ? '0px' : 0 }">
              <div class="bg-white border-rounded-2xl">
                <div
                  class="tab-nav px-2.5 pt-2.5 flex justify-between"
                  :class="{ 'is-sticky': isSticky }"
                >
                  <ul class="flex gap-2">
                    <li
                      class="pt-2 pb-3 px-3.5"
                      :class="{ active: activeIndexTab === 0 }"
                      @click="handleTabClick(0)"
                    >
                      <span class="text-md font-600">大家评</span>
                    </li>
                    <li
                      class="py-2 pb-3 px-3.5"
                      :class="{ active: activeIndexTab === 1 }"
                      @click="handleTabClick(1)"
                    >
                      <span class="text-md font-600">店铺</span>
                    </li>
                    <li
                      class="py-2 pb-3 px-3.5"
                      :class="{ active: activeIndexTab === 2 }"
                      @click="handleTabClick(2)"
                    >
                      <span class="text-md font-600">商品详情</span>
                    </li>
                    <li
                      class="py-2 pb-3 px-3.5"
                      :class="{ active: activeIndexTab === 3 }"
                      @click="handleTabClick(3)"
                    >
                      <span class="text-md font-600">售后保障</span>
                    </li>
                    <li
                      class="py-2 pb-3 px-3.5"
                      :class="{ active: activeIndexTab === 4 }"
                      @click="handleTabClick(4)"
                    >
                      <span class="text-md font-600">推荐</span>
                    </li>
                  </ul>
                  <div class="flex items-center cursor-pointer" @click="handleCompare">
                    <b class="font-italic mr-1 text-gray-600">PK </b>
                    <span class="text-gray-500">商品对比</span>
                    <el-icon size="14"><ArrowRight /></el-icon>
                  </div>
                </div>
                <div class="h-5"></div>
                <div class="">
                  <div class="" ref="commentPanelRef">
                    <Suspense>
                      <CommentPanel></CommentPanel>
                      <template #fallback>
                        <LoadingSpinner message="正在加载组件评论区..." />
                      </template>
                    </Suspense>
                    <!-- 提问区 -->
                    <div class="border-t mt-5 px-5" ref="questionPanelRef">
                      <Suspense>
                        <EcommerceQuestionList />
                        <template #fallback>
                          <LoadingSpinner message="正在加载组件提问区..." />
                        </template>
                      </Suspense>
                    </div>
                    <div class="border-t mt-5 px-5" ref="recommendScrollPanelRef">
                      <Suspense>
                        <RecommendScrollPanel />
                        <template #fallback>
                          <LoadingSpinner message="正在加载组件推荐区..." />
                        </template>
                      </Suspense>
                    </div>
                  </div>
                  <div class="border-t" ref="shopPanelRef">
                    <Suspense>
                      <ShopPanel></ShopPanel>
                      <template #fallback>
                        <LoadingSpinner message="正在加载组件店铺区..." />
                      </template>
                    </Suspense>
                  </div>
                  <div class="border-t" ref="detailInfoPanelRef">
                    <Suspense>
                      <DetailInfoContent></DetailInfoContent>
                      <template #fallback>
                        <LoadingSpinner message="正在加载组件DETAIL INFO..." />
                      </template>
                    </Suspense>
                  </div>
                  <div class="" ref="afterSalesServicePanelRef">
                    <Suspense>
                      <AfterSalesServicePanel></AfterSalesServicePanel>
                      <template #fallback>
                        <LoadingSpinner message="正在加载组件AFTER SALES SERVICE..." />
                      </template>
                    </Suspense>
                  </div>
                </div>
              </div>
              <div class="h-5"></div>
              <div class="bg-white border-rounded-2xl" ref="recommendPanelRef">
                <Suspense>
                  <RecommendPanel v-show="recommendPanelVisible"></RecommendPanel>
                  <template #fallback>
                    <LoadingSpinner message="正在加载组件推荐区..." />
                  </template>
                </Suspense>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="w-4/10">
        <div
          class="detail-info-box bg-white border-rounded-2xl transition-all"
          ref="stickyElement"
          :class="{ 'is-sticky': isSticky, 'is-sticky-bottom': isStickyBottom }"
          :style="{ zIndex: stickyZindex }"
        >
          <Suspense>
            <DetailInfoPanel
              :product="product"
              :isStickyBottom="isStickyBottom"
              @update:stickyZindex="handleUpdateZIndex"
            ></DetailInfoPanel>
            <template #fallback>
              <el-skeleton :rows="15" />
              <!-- <LoadingSpinner message="正在加载组件商品详情..." /> -->
            </template>
          </Suspense>
        </div>
      </div>
    </div>
    <div class="h-15" ref="checkElementRef"></div>
  </div>
</template>
<script setup lang="ts">
import {
  ref,
  onMounted,
  onUnmounted,
  computed,
  nextTick,
  defineAsyncComponent,
} from "vue";
import type { Ref } from "vue";
import { useRoute } from "vue-router";
import type { MediaItem } from "@/types/media.ts";
import { throttle } from "@/utils/util";
import * as Api from "@/api/index";
import { ArrowRight } from "@element-plus/icons-vue";
import LoadingSpinner from "@/components/LoadingSpinner.vue";

// 同步加载图片预览组件，后续的组件异步加载
import PreviewPanel from "./components/Detail/PreviewPanel.vue";

const loadedComponents = ref([]);
const Header = defineAsyncComponent(() => import("./components/Header.vue"));
const DetailInfoPanel = defineAsyncComponent(
  () => import("./components/Detail/DetailInfoPanel.vue")
);
const CommentPanel = defineAsyncComponent(
  () => import("./components/Detail/CommentPanel.vue")
);
const EcommerceQuestionList = defineAsyncComponent(
  () => import("./components/Detail/EcommerceQuestionList.vue")
);
const ShopPanel = defineAsyncComponent(() => import("./components/Detail/ShopPanel.vue"));
const DetailInfoContent = defineAsyncComponent(
  () => import("./components/Detail/DetailInfoContent.vue")
);
const AfterSalesServicePanel = defineAsyncComponent(
  () => import("./components/Detail/AfterSalesServicePanel.vue")
);
const RecommendScrollPanel = defineAsyncComponent(
  () => import("./components/Detail/RecommendScrollPanel.vue")
);
const RecommendPanel = defineAsyncComponent(
  () => import("./components/Detail/RecommendPanel.vue")
);

// 模拟数据
import { productDetail } from "@/mock/data/product-detail";

const route = useRoute();
const id = ref(route.params.id);
const product = ref<any>(null);
const getProductDetail = async () => {
  console.log("获取商品详情：", productDetail);
  product.value = {
    id: 6,
    name:
      "大疆 【国家补贴】Osmo Action 5 Pro 畅拍套装 超旗舰画质运动相机 户外摩托骑行潜水徒步vlog相机  ",
    price: 5999,
    desc: "骁龙8 Gen 2 5G手机",
    themb:
      "https://img14.360buyimg.com/babel/s240x240_jfs/t1/37195/24/21969/12392/66bdb221F03d82604/dc4e328e65378757.jpg.avif",
    thembs: [
      "https://img14.360buyimg.com/n5/s114x114_jfs/t1/162589/20/49646/80092/672f06cbF3a591fda/a28213801c65d814.jpg",
      "https://img14.360buyimg.com/n5/s114x114_jfs/t1/150058/10/45778/42478/672f06cbF60aeb7fc/cd9ace8745f94109.jpg",
      "https://img14.360buyimg.com/n5/s114x114_jfs/t1/130229/28/50011/85205/672f06ccF3a82dd80/223b79d7eece55e3.jpg",
      "https://img14.360buyimg.com/n5/s114x114_jfs/t1/215920/11/47423/115206/672f06c8Fdd0780da/c681974a8cef78d7.jpg",
      "https://img14.360buyimg.com/n5/s114x114_jfs/t1/156657/11/50775/115248/672f06c8F5d165244/081db10b9cd0a35e.jpg",
      "https://img14.360buyimg.com/n5/s114x114_jfs/t1/188855/26/50768/66225/672f06caF142c59c1/fa376a3d1885c51f.jpg",
      "https://img14.360buyimg.com/n5/s114x114_jfs/t1/233551/19/34302/98346/67bfdb03Feeceef77/7015ca04de80d873.jpg",
      "https://img14.360buyimg.com/n5/s114x114_jfs/t1/294920/32/2742/66861/681b1e22Fb5f1b23e/c11a622fa6878b9e.jpg",
      "https://img14.360buyimg.com/n5/s114x114_jfs/t1/340876/5/8092/83364/68bd4675F644ae0e2/eb2a63c26e98e948.jpg",

      "https://img14.360buyimg.com/n5/s114x114_jfs/t1/162589/20/49646/80092/672f06cbF3a591fda/a28213801c65d814.jpg",
      "https://img14.360buyimg.com/n5/s114x114_jfs/t1/150058/10/45778/42478/672f06cbF60aeb7fc/cd9ace8745f94109.jpg",
      "https://img14.360buyimg.com/n5/s114x114_jfs/t1/130229/28/50011/85205/672f06ccF3a82dd80/223b79d7eece55e3.jpg",
      "https://img14.360buyimg.com/n5/s114x114_jfs/t1/215920/11/47423/115206/672f06c8Fdd0780da/c681974a8cef78d7.jpg",
      "https://img14.360buyimg.com/n5/s114x114_jfs/t1/156657/11/50775/115248/672f06c8F5d165244/081db10b9cd0a35e.jpg",
      "https://img14.360buyimg.com/n5/s114x114_jfs/t1/188855/26/50768/66225/672f06caF142c59c1/fa376a3d1885c51f.jpg",
      "https://img14.360buyimg.com/n5/s114x114_jfs/t1/233551/19/34302/98346/67bfdb03Feeceef77/7015ca04de80d873.jpg",
      "https://img14.360buyimg.com/n5/s114x114_jfs/t1/294920/32/2742/66861/681b1e22Fb5f1b23e/c11a622fa6878b9e.jpg",
      "https://img14.360buyimg.com/n5/s114x114_jfs/t1/340876/5/8092/83364/68bd4675F644ae0e2/eb2a63c26e98e948.jpg",
      "https://img14.360buyimg.com/n5/s114x114_jfs/t1/162589/20/49646/80092/672f06cbF3a591fda/a28213801c65d814.jpg",
      "https://img14.360buyimg.com/n5/s114x114_jfs/t1/150058/10/45778/42478/672f06cbF60aeb7fc/cd9ace8745f94109.jpg",
      "https://img14.360buyimg.com/n5/s114x114_jfs/t1/130229/28/50011/85205/672f06ccF3a82dd80/223b79d7eece55e3.jpg",
      "https://img14.360buyimg.com/n5/s114x114_jfs/t1/215920/11/47423/115206/672f06c8Fdd0780da/c681974a8cef78d7.jpg",
      "https://img14.360buyimg.com/n5/s114x114_jfs/t1/156657/11/50775/115248/672f06c8F5d165244/081db10b9cd0a35e.jpg",
      "https://img14.360buyimg.com/n5/s114x114_jfs/t1/188855/26/50768/66225/672f06caF142c59c1/fa376a3d1885c51f.jpg",
      "https://img14.360buyimg.com/n5/s114x114_jfs/t1/233551/19/34302/98346/67bfdb03Feeceef77/7015ca04de80d873.jpg",
      "https://img14.360buyimg.com/n5/s114x114_jfs/t1/294920/32/2742/66861/681b1e22Fb5f1b23e/c11a622fa6878b9e.jpg",
      "https://img14.360buyimg.com/n5/s114x114_jfs/t1/340876/5/8092/83364/68bd4675F644ae0e2/eb2a63c26e98e948.jpg",
    ],
    imgs: [
      "//img10.360buyimg.com/n5/s720x720_jfs/t1/302408/22/14708/45779/684f6d14Fbbaba9c9/d3efc425c5bd5592.jpg.avif",
      "https://img14.360buyimg.com/n5/s720x720_jfs/t1/150058/10/45778/42478/672f06cbF60aeb7fc/cd9ace8745f94109.jpg",
      "https://img14.360buyimg.com/n5/s720x720_jfs/t1/215920/11/47423/115206/672f06c8Fdd0780da/c681974a8cef78d7.jpg",
      "https://img14.360buyimg.com/n5/s720x720_jfs/t1/156657/11/50775/115248/672f06c8F5d165244/081db10b9cd0a35e.jpg",
      "https://img14.360buyimg.com/n5/s720x720_jfs/t1/156657/11/50775/115248/672f06c8F5d165244/081db10b9cd0a35e.jpg",
      "https://img14.360buyimg.com/n5/s720x720_jfs/t1/156657/11/50775/115248/672f06c8F5d165244/081db10b9cd0a35e.jpg",
      " https://img14.360buyimg.com/n5/s720x720_jfs/t1/156657/11/50775/115248/672f06c8F5d165244/081db10b9cd0a35e.jpg",
      "https://img14.360buyimg.com/n5/s720x720_jfs/t1/156657/11/50775/115248/672f06c8F5d165244/081db10b9cd0a35e.jpg",
    ],
    mediaList: [
      {
        id: "video-main",
        type: "video",
        thumbnail:
          "https://img10.360buyimg.com/n5/s114x114_jfs/t1/304126/15/11062/49168/684f6d14F3cd0fa1f/89763af1e65fe326.jpg.avif",
        videoSrc:
          "https://vod.300hu.com/24/4c1f7a6atransbjngwcloud1oss/0fc5c9ad998943799588753409/1097_4794_1_82b362388_f.mp4?source=1&h265=1088_3000_1_a1cae23c6_f.mp4",
        poster:
          "https://img10.360buyimg.com/n5/s720x720_jfs/t1/302408/22/14708/45779/684f6d14Fbbaba9c9/d3efc425c5bd5592.jpg.avif", // 视频封面图，通常用主图尺寸
      },
      {
        id: "img-1",
        type: "image",
        thumbnail:
          "https://img10.360buyimg.com/n5/s114x114_jfs/t1/304126/15/11062/49168/684f6d14F3cd0fa1f/89763af1e65fe326.jpg.avif",
        src:
          "//img10.360buyimg.com/n5/s720x720_jfs/t1/302408/22/14708/45779/684f6d14Fbbaba9c9/d3efc425c5bd5592.jpg.avif",
      },
      {
        id: "img-2",
        type: "image",
        thumbnail:
          "https://img14.360buyimg.com/n5/s114x114_jfs/t1/150058/10/45778/42478/672f06cbF60aeb7fc/cd9ace8745f94109.jpg",
        src:
          "https://img14.360buyimg.com/n5/s720x720_jfs/t1/150058/10/45778/42478/672f06cbF60aeb7fc/cd9ace8745f94109.jpg",
      },
      {
        id: "img-3",
        type: "image",
        thumbnail:
          "https://img14.360buyimg.com/n5/s114x114_jfs/t1/150058/10/45778/42478/672f06cbF60aeb7fc/cd9ace8745f94109.jpg",
        src:
          "https://img14.360buyimg.com/n5/s720x720_jfs/t1/150058/10/45778/42478/672f06cbF60aeb7fc/cd9ace8745f94109.jpg",
      },
      {
        id: "img-4",
        type: "image",
        thumbnail:
          "https://img12.360buyimg.com/n5/s114x114_jfs/t1/150058/10/45778/42478/672f06cbF60aeb7fc/cd9ace8745f94109.jpg",
        src:
          "https://img12.360buyimg.com/n5/s720x720_jfs/t1/150058/10/45778/42478/672f06cbF60aeb7fc/cd9ace8745f94109.jpg",
      },
      {
        id: "img-5",
        type: "image",
        thumbnail:
          "https://img12.360buyimg.com/n5/s114x114_jfs/t1/150058/10/45778/42478/672f06cbF60aeb7fc/cd9ace8745f94109.jpg",
        src:
          "https://img12.360buyimg.com/n5/s720x720_jfs/t1/150058/10/45778/42478/672f06cbF60aeb7fc/cd9ace8745f94109.jpg",
      },
      {
        id: "img-6",
        type: "image",
        thumbnail:
          "https://img12.360buyimg.com/n5/s114x114_jfs/t1/150058/10/45778/42478/672f06cbF60aeb7fc/cd9ace8745f94109.jpg",
        src:
          "https://img12.360buyimg.com/n5/s720x720_jfs/t1/150058/10/45778/42478/672f06cbF60aeb7fc/cd9ace8745f94109.jpg",
      },
      {
        id: "img-6",
        type: "image",
        thumbnail:
          "https://img12.360buyimg.com/n5/s114x114_jfs/t1/150058/10/45778/42478/672f06cbF60aeb7fc/cd9ace8745f94109.jpg",
        src:
          "https://img12.360buyimg.com/n5/s720x720_jfs/t1/150058/10/45778/42478/672f06cbF60aeb7fc/cd9ace8745f94109.jpg",
      },
      {
        id: "img-6",
        type: "image",
        thumbnail:
          "https://img12.360buyimg.com/n5/s114x114_jfs/t1/150058/10/45778/42478/672f06cbF60aeb7fc/cd9ace8745f94109.jpg",
        src:
          "https://img12.360buyimg.com/n5/s720x720_jfs/t1/150058/10/45778/42478/672f06cbF60aeb7fc/cd9ace8745f94109.jpg",
      },
      {
        id: "img-6",
        type: "image",
        thumbnail:
          "https://img12.360buyimg.com/n5/s114x114_jfs/t1/150058/10/45778/42478/672f06cbF60aeb7fc/cd9ace8745f94109.jpg",
        src:
          "https://img12.360buyimg.com/n5/s720x720_jfs/t1/150058/10/45778/42478/672f06cbF60aeb7fc/cd9ace8745f94109.jpg",
      },
    ] as MediaItem[],
    category: "手机",
    stock: 100,
    soldNum: 2300,
    saleTags: "自营",
    tags: ["超感光", "徕卡", "四摄", "5G", "手机"],
    specs: [
      { name: "尺寸", values: ["小号", "中号", "大号"], images: {} },
      { name: "颜色", values: ["红色", "蓝色", "白色"], images: {} },
    ],
    skus: [
      {
        id: 269,
        sku_name: "小号 / 红色",
        price: "10.00",
        stock: 10,
        image: null,
        specs: { 尺寸: "小号", 颜色: "红色" },
      },
      {
        id: 270,
        sku_name: "小号 / 蓝色",
        price: "10.00",
        stock: 0,
        image: null,
        specs: { 尺寸: "小号", 颜色: "蓝色" },
      },
      {
        id: 271,
        sku_name: "小号 / 白色",
        price: "10.00",
        stock: 0,
        image: null,
        specs: { 尺寸: "小号", 颜色: "白色" },
      },
      {
        id: 272,
        sku_name: "中号 / 红色",
        price: "10.00",
        stock: 0,
        image: null,
        specs: { 尺寸: "中号", 颜色: "红色" },
      },
      {
        id: 273,
        sku_name: "中号 / 蓝色",
        price: "10.00",
        stock: 0,
        image: null,
        specs: { 尺寸: "中号", 颜色: "蓝色" },
      },
      {
        id: 274,
        sku_name: "中号 / 白色",
        price: "10.00",
        stock: 0,
        image: null,
        specs: { 尺寸: "中号", 颜色: "白色" },
      },
      {
        id: 275,
        sku_name: "大号 / 红色",
        price: "10.00",
        stock: 0,
        image: null,
        specs: { 尺寸: "大号", 颜色: "红色" },
      },
      {
        id: 276,
        sku_name: "大号 / 蓝色",
        price: "10.00",
        stock: 0,
        image: null,
        specs: { 尺寸: "大号", 颜色: "蓝色" },
      },
      {
        id: 277,
        sku_name: "大号 / 白色",
        price: "10.00",
        stock: 0,
        image: null,
        specs: { 尺寸: "大号", 颜色: "白色" },
      },
    ],
    hot: true, // 热门
  };
  // 先使用模拟数据
  return;
  const id = "e3925022-4506-47d9-a277-5690b631a6e8";
  try {
    const res: any = await Api.productApi.getProductDetail(id);

    console.log("商品详情：", res);
    let originalData = res.data;
    console.log("商品详情：", originalData);
    product.value = originalData;
  } catch (error) {
    console.error("获取商品详情失败：", error);
  }
};

const recommendPanelVisible = ref(false);

const stickyZindex = ref(9);
const handleUpdateZIndex = (zindex: number) => {
  console.log("更新zindex:", zindex);
  stickyZindex.value = zindex;
};
// --固定商品详情--
const detailWrapperRef = ref<HTMLDivElement | null>(null);
// 锚点定位使用
const commentPanelRef = ref<HTMLDivElement | null>(null);
const questionPanelRef = ref<HTMLDivElement | null>(null);
const recommendScrollPanelRef = ref<HTMLDivElement | null>(null);
const recommendPanelRef = ref<HTMLDivElement | null>(null);
const shopPanelRef = ref<HTMLDivElement | null>(null);
const detailInfoPanelRef = ref<HTMLDivElement | null>(null);
const afterSalesServicePanelRef = ref<HTMLDivElement | null>(null);

const checkElementRef = ref<HTMLDivElement | null>(null);
const stickyElement = ref<HTMLDivElement | null>(null);
const isSticky = ref(false);
const isStickyBottom = ref(false);

const handleScroll = () => {
  // 获取目标元素的DOM引用
  if (!detailWrapperRef.value || !stickyElement.value) return;
  const elementWidth = stickyElement.value.offsetWidth;
  stickyElement.value.style.width = `${elementWidth}px`;
  // 获取元素距离文档顶部的距离
  const elementTop = detailWrapperRef.value.offsetTop;
  // 获取当前滚动条垂直位置（跨浏览器兼容写法）
  const scrollTop =
    window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

  isSticky.value = scrollTop - elementTop > 0;
  // 观察目标元素
  if (checkElementRef.value) {
    observer.observe(checkElementRef.value);
  }
};
// 创建观察器实例（检测元素进入视口）
const observer = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      console.log("元素进入视口：", entry.isIntersecting);
      isStickyBottom.value = entry.isIntersecting;
    });
  },
  {
    root: null, // 根元素为视口（默认）
    rootMargin: "0px", // 无边距
    threshold: 0.1, // 元素10%进入视口时触发
  }
);

// 商品详情模块

const activeIndexTab = ref(0);
const handleCompare = () => {
  console.log("商品对比");
};

const handleTabClick = (index: number) => {
  activeIndexTab.value = index;
  switch (index) {
    case 0:
      scrollToAnchor(commentPanelRef);
      break;
    case 1:
      scrollToAnchor(shopPanelRef);
      break;
    case 2:
      scrollToAnchor(detailInfoPanelRef);
      break;
    case 3:
      scrollToAnchor(afterSalesServicePanelRef);
      break;
    case 4:
      scrollToAnchor(recommendPanelRef);
      break;
    default:
  }
};
const scrollToAnchor = (ref: Ref<HTMLDivElement | null>) => {
  if (ref.value) {
    const elementTop = ref.value.offsetTop;
    console.log("元素距离文档顶部的距离：", elementTop);
    const currentScroll = window.pageYOffset || document.documentElement.scrollTop;
    const stickyHeaderHeight = -770; // 根据你的固定头部高度调整

    window.scrollTo({
      top: elementTop - stickyHeaderHeight, // 减去固定头部高度
      behavior: "instant",
    });
  }
};
// 滚动到指定锚点
// const scrollToAnchor =async (ref: Ref<HTMLDivElement | null>) => {
//   await nextTick();
//   if (ref.value) {
//     ref.value.scrollIntoView({
//       behavior: "smooth", // 平滑滚动
//       block: "start", // 对齐到顶部
//     });
//   }
// };
onMounted(async () => {
  console.log(id.value);
  await getProductDetail();
  console.log(product.value);
  window.scrollTo({
    top: 60,
    behavior: "smooth",
  });
  window.addEventListener("scroll", throttle(handleScroll, 30));

  nextTick(() => {
    recommendPanelVisible.value = true;
  });
});
onUnmounted(() => {
  window.removeEventListener("scroll", handleScroll);
});
</script>
<style lang="scss">
$height: 15px;
body {
  background: var(--bg-base-color);
}
footer {
  background-color: #fff;
}
.detail-banner {
  background: linear-gradient(to right, #f30202, #feb47b);
  height: 55px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}
.mask-line {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: $height;
  background-color: var(--bg-base-color);
  z-index: 300;
}
.sticky-element {
  position: sticky; /* 声明为粘性定位 */
  top: $height; /* 距离视口顶部的阈值（触发固定的临界值） */
  z-index: 10;
  /* 可选：bottom/right/left 用于其他方向的固定 */
}
.is-sticky {
  position: fixed;
  top: $height;
  width: auto;
  z-index: 10;
  /* 可以添加一些吸附后的样式 */
  background-color: #fff;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.05);
}
.is-sticky-bottom {
  position: absolute;
  bottom: 0;
  top: auto;
  width: auto;
  z-index: 1000;
  /* 可以添加一些吸附后的样式 */
  background-color: #fff;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.05);
}

.tab-box {
  .tab-nav {
    position: sticky;
    li {
      position: relative;
      &::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        height: 2px;
        width: 65%;
        opacity: 0;
        background-color: rgb(73, 72, 72);
        transform: translateX(-50%);
      }
      span {
        color: #333;
        cursor: pointer;
      }
      &.active {
        span {
          color: #f80101;
        }
        &::after {
          background-color: red;
          opacity: 1;
        }
      }
    }
  }
}
</style>
